<template>
  <div class="food_list">
    <el-input v-model="search" placeholder="请输入名称" clearable @change="getFoodList"></el-input>
    <div v-for="item in foodlists" :key="item.id" @click="handleRowClick(item.id)" class="food-item" :style="{ backgroundImage: 'url(' + item.image + ')' }">
      <div class="text">{{ item.name }}</div>
      <div class="mark"></div>
    </div>
  </div>
</template>
<script setup>
import { queryAllFood } from './api.js'
import { useRouter } from "vue-router"
import { onMounted, ref } from 'vue';
const router = useRouter()
const foodlists = ref([])
const search = ref('')
const tloading = ref(false)
onMounted(() => {
  getFoodList();
})

const getFoodList = () => {
  tloading.value = true
  queryAllFood().then(res => {
    tloading.value = false
    foodlists.value = res.result
    foodlists.value = foodlists.value.filter(row => row.name.includes(search.value))
  })
}

const handleRowClick = (id) => {
  console.log(id);
  router.push({
    path: '/database/foodinfo',
    query: { id: id }
  })
}
</script>

<style lang="scss" scoped>
.food_list {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 5px;

  ::v-deep .el-input__wrapper {
    border-radius: 20px;
  }
}

.food-item {
  height: 80px;
  width: 80px;
  margin: 10px;
  border-radius: 20px;
  // background-image: url("@/assets/猪肉.jpg");
  // background: rgba(0, 0, 0, 0.37), url("./猪肉.jpg");
  // opacity: 0.6;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  color: #fff;
  // text-align: center;
  position: relative;

  .text {
      font-size: 15px;
      font-weight: 500;
      // font-weight: bold;
      position: absolute;
      width: 100%;
      bottom: 10px;
      z-index: 99;
      color: #fff;
      // background-color: rgba(0, 0, 0, 0.4);
  }

  .mark {
      border-radius: 20px;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      // 线性渐变
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(187, 23, 23, 0.4) 100%);
  }
}

// @media (max-width: 401px) {
//   .food-item {
//     width: calc(33% - 20px);
//     height: 80px;
//     font-size: 25px;

//   }
// }

// @media (min-width: 401px) and (max-width: 800px) {
//   .food-item {
//     width: calc(20% - 20px);
//     height: 50px;
//     margin: 10px;
//     font-size: 16px;
//   }
// }

// @media screen and (min-width: 800px) {
//   .food-item {
//     width: calc(10% - 20px);
//   }

// }
</style>